import $ from 'jquery';
import {constant} from '@/components/hhd/design/FormDesigner/action/DesignDragAction';

export default class ViewsParser {
  constructor(formDefinition) {
    this.formDefinition = formDefinition;
  }

  parse() {
    let views = this.formDefinition.views || [];
    views.forEach(view => this.psrseView(view));
  }

  psrseView(view) {
    let {html} = view;
    if (!html) {
      view.templateConfigs = [];
      return;
    }
    let elements = ($(html) || []), list = [];
    for (let i = 0; i < elements.length; i++) {
      let config = this.parseItem(elements[i]);
      config && list.push(config);
    }
    view.templateConfigs = list;
  }

  parseItem(element) {
    if (this.isFieldElement(element)) {
      return this.parseFieldElement(element);
    }
    if (this.isLayout(element)) {
      return this.parseLayout(element);
    }
    if (this.isSubTable(element)) {
      return this.parseSubTable(element);
    }
  }

  parseSubTable(element) {
    let header = [], body = [], footer = [];
    let trs = $(element).find('tr[data-sub-table-role=header]');
    let headerHeight = []
    let bodyHeight = []
    let footerHeight = []
    for (let i = 0; i < trs.length; i++) {
      header.push(this.parseRow(trs[i]));
      headerHeight.push(this.parseRowHeight(trs[i]));
    }

    trs = $(element).find('tr[data-sub-table-role=body]');
    for (let i = 0; i < trs.length; i++) {
      body.push(this.parseRow(trs[i]));
      bodyHeight.push(this.parseRowHeight(trs[i]));
    }

    trs = $(element).find('tr[data-sub-table-role=footer]');
    for (let i = 0; i < trs.length; i++) {
      footer.push(this.parseRow(trs[i]));
      footerHeight.push(this.parseRowHeight(trs[i]));
    }

    let barContainerTd = $(element).find('[data-sub-table-role=sub-form-button-container]');
    let barContainer = {
      style: $(barContainerTd).attr('style'),
      barContainerHeight: $(barContainerTd).parent().css('height'),
    }

    let colWidth = this.parseColWidth(element) || []
    return {
      type: constant.layout, barContainer,
      header, body, footer, colWidth,
      headerHeight, bodyHeight, footerHeight,
      subFormId: $(element).attr('data-sub-form-id')
    };
  }

  parseLayout(element) {
    let rows = [], trs = $(element).find('tr'), colWidth = undefined, rowHeight = [];
    colWidth = this.parseColWidth(element) || []
    let res = {
      type: constant.layout,
      colWidth,
      rows
    };
    for (let i = 0; i < trs.length; i++) {
      rows.push(this.parseRow(trs[i]));
      rowHeight.push(this.parseRowHeight(trs[i]));
    }
    res.rowHeight = rowHeight;
    return res;
  }

  parseRowHeight(tr) {
    return $(tr).css('height');
  }

  parseColWidth(element) {
    let res = []
    let cols = $(element).find('col');
    for (let i = 0; i < cols.length; i++) {
      res.push($(cols[i]).css('width'));
    }
    return res;
  }

  parseRow(tr) {
    let row = [], tds = $(tr).find('td');
    for (let i = 0; i < tds.length; i++) {
      let td = tds[i];
      row.push(this.parseCell(td));
    }
    return row;
  }

  parseCell(td) {
    let fieldWrapper = $(td).find('.field-wrapper');
    let style = $(td).attr('style');
    let rowspan = $(td).attr('rowspan');
    let colspan = $(td).attr('colspan');
    if (fieldWrapper.length) {
      fieldWrapper = fieldWrapper[0];
      //存在字段
      return {
        style, rowspan, colspan,
        fieldConfig: this.parseFieldElement(fieldWrapper),
      };
    } else {
      //不存在字段
      return {
        style, rowspan, colspan,
        content: $(td).find('.content-wrapper').html(),
      };
    }
  }

  parseFieldElement(element) {
    return {
      fieldId: $(element).attr('data-field-id'),
      type: constant.field,
    };
  }

  isSubTable(element) {
    return $(element).attr('data-role') === 'layout' && $(element).attr('data-layout-type') === constant.subTable;
  }

  isLayout(element) {
    return $(element).attr('data-role') === 'layout' && $(element).attr('data-layout-type') === constant.layout;
  }

  isFieldElement(element) {
    return $(element).attr('data-role') === constant.field;
  }
}